<template>
  <div class="_hotel">
    <div class="page-container">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-card shadow="never">
          <el-form :inline="true" size="small">
            <el-form-item label="酒店名称">
              <el-input
                v-model="search.name"
                placeholder="请输入酒店名称"
                clearable
                @keyup.enter.native="searchPage">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchPage">查询</el-button>
              <el-button icon="el-icon-refresh" @click="refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 表格区域 -->
      <div class="table-area">
        <el-card shadow="never">
          <div class="table-operations">
            <el-button-group>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="add">新增酒店</el-button>
              <el-button type="success" icon="el-icon-edit" size="small" :disabled="update.length !== 1" @click="updateDataBtn">编辑酒店</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" :disabled="update.length === 0" @click="deleteDataBtn">删除酒店</el-button>
            </el-button-group>
          </div>

          <el-table
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            stripe
            style="width: 100%">
            <el-table-column
              type="selection"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="酒店名称"
              min-width="150"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="introduce"
              label="酒店介绍"
              min-width="250"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="100"
              align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state === 1 ? 'success' : 'info'" size="small">
                  {{ scope.row.state === 1 ? '上架' : '下架' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="160"
              align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              width="250"
              align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button 
                    size="mini"
                    :type="scope.row.state === 0 ? 'success' : 'warning'"
                    @click="toEdit(scope.row.id, scope.row.state === 0 ? 1 : 0, scope.row.attractionsId)">
                    {{ scope.row.state === 0 ? '上架' : '下架' }}
                  </el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="toItem(scope.row.id)">
                    房型管理
                  </el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="updateData(scope.row.id)">
                    修改
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="search.pageNumber"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="search.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <add @addFalse="addFalse" :addVisible="addVisible"></add>
    <update @updateFalse="updateFalse" :updateId="updateId" :updateVisible="updateVisible"></update>
  </div>
</template>

<script>
  import {getSysHotelPage, removeSysHotel, editSysHotel} from '../../../api/api' 
  import add from '../../../components/system/hotel/addHotel'
  import update from '../../../components/system/hotel/updateHotel'
  export default {
    data() {
      return {
        loading: true,
        update: [],
        remove: [],
        updateId: "",
        addVisible: false,
        updateVisible: false,
        search: {
          name: "",
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        tableData: []
      }
    },
    components: {
      add,
      update
    },
    methods: {
      toEdit(id, state, attractionsId) {
        const param = {
          id,
          state,
          attractionsId
        }
        editSysHotel(param).then(res => {
          if(res.code == 1000) {
            this.$message({
              type: 'success',
              message: state === 1 ? '上架成功' : '下架成功'
            })
            this.query()
          } else {
            this.$message.error(res.message)
          }
        })
      },
      toItem(id) {
        const param = {
          name: "房型管理",
          url: "/hotelItem?id=" + id
        }
        this.$store.commit('menu/addActiveMenu', param)
        this.$router.push("/hotelItem?id=" + id)
        this.$store.commit('menu/setActiveMenu', "/hotelItem?id=" + id)
      },
      searchPage() {
        this.search.pageNumber = 1
        this.query()
      },
      query() {
        this.loading = true
        getSysHotelPage(this.search).then(res => {
          if(res.code == 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        })
      },
      refresh() {
        this.search.name = ""
        this.query()
      },
      handleCurrentChange(val) {
        this.search.pageNumber = val
        this.query()
      },
      handleSizeChange(val) {
        this.search.pageSize = val
        this.query()
      },
      handleSelectionChange(val) {
        this.update = []
        this.remove = []
        val.forEach(item => {
          this.update.push(item.id)
          this.remove.push(item.id)
        })
      },
      add() {
        this.addVisible = true
      },
      addFalse() {
        this.addVisible = false
        this.query()
      },
      updateFalse() {
        this.updateId = ''
        this.updateVisible = false
        this.query()
      },
      updateData(id) {
        this.updateId = id
        this.updateVisible = true
      },
      updateDataBtn() {
        this.updateData(this.update[0])
      },
      handleDelete(row) {
        this.$confirm('确定要删除这个酒店吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDate(row.id)
        }).catch(() => {})
      },
      deleteDataBtn() {
        this.$confirm(`确定删除选中的 ${this.remove.length} 个酒店?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteDate(this.remove.join(","))
        }).catch(() => {})
      },
      deleteDate(ids) {
        removeSysHotel({ids}).then(res => {
          if(res.code == 1000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.query()
          } else {
            this.$message.error(res.message)
          }
        })
      },
    },
    mounted() {
      this.query()
    }
  }
</script>

<style lang="scss" scoped>
._hotel {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;

  .page-container {
    .search-area {
      margin-bottom: 20px;

      .el-form {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;

        .el-form-item {
          margin-bottom: 0;
          
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .table-area {
      .table-operations {
        margin-bottom: 16px;
      }

      .el-table {
        margin-bottom: 16px;
      }
    }
  }

  .pagination-container {
    padding: 10px 0;
    text-align: right;
  }

  // 卡片样式优化
  .el-card {
    border-radius: 8px;
    border: none;

    &.is-always-shadow {
      box-shadow: 0 1px 4px rgba(0,21,41,.08);
    }

    .el-card__body {
      padding: 20px;
    }
  }

  // 表格样式优化
  .el-table {
    border-radius: 8px;
    overflow: hidden;

    th {
      background: #fafafa;
      color: #1f2d3d;
      font-weight: 500;
    }

    td {
      color: #606266;
    }
  }

  // 按钮样式优化
  .el-button {
    &.el-button--small {
      padding: 9px 15px;
    }

    &.el-button--mini {
      padding: 7px 12px;
    }
  }

  // 标签样式优化
  .el-tag {
    border-radius: 4px;
    
    &.el-tag--success {
      background-color: #f0f9eb;
      border-color: #e1f3d8;
      color: #67c23a;
    }
    
    &.el-tag--info {
      background-color: #f4f4f5;
      border-color: #e9e9eb;
      color: #909399;
    }
  }
}
</style>